<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="未审核" name="first">
        <el-table
          :data="workList"
          stripe
          style="width: 100%">
          <el-table-column
            prop="workId"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            width="80">
          </el-table-column>
          <el-table-column
            prop="workTime"
            label="时间"
            width="130">
          </el-table-column>
          <el-table-column
            prop="workContext"
            label="工作内容"
            width="120">
          </el-table-column>
          <el-table-column
            prop="workCount"
            width="120"
            label="工作量">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-row>
                <el-button icon="el-icon-search" circle size="small">详情</el-button>
                <el-button type="success" icon="el-icon-check" circle size="small">通过</el-button>
                <el-button type="danger" icon="el-icon-delete" circle size="small">驳回</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="params.page"
          :page-size="params.size"
          style="float: right;"
          layout="prev, pager, next"
          @current-change="changePage"
          :total="total">
        </el-pagination>


      </el-tab-pane>
      <el-tab-pane label="已审核" name="second">
        <el-table
          :data="workList"
          stripe
          style="width: 100%">
          <el-table-column
            prop="workId"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            width="80">
          </el-table-column>
          <el-table-column
            prop="workTime"
            label="时间"
            width="130">
          </el-table-column>
          <el-table-column
            prop="workContext"
            label="工作内容"
            width="100">
          </el-table-column>
          <el-table-column
            prop="workCount"
            width="120"
            label="工作量">
          </el-table-column>
          <el-table-column
            prop="workCheckStatus"
            width="140"
            label="审核结果">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-row>
                <el-button icon="el-icon-search" circle size="small">查看详情</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="params.page"
          :page-size="params.size"
          style="float: right;"
          layout="prev, pager, next"
          @current-change="changePage"
          :total="total">
        </el-pagination>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        workList: [{
          workId: '1',
          userName: '张三',
          workTime: '2019-12-5',
          workContext: '组装屏幕',
          workCount: '120件 ',
          workCheckStatus: '部门经理审核中',
        },
          {
            workId: '2',
            userName: 'Harry',
            workTime: '2019-12-5',
            workContext: '组装屏幕',
            workCount: '150件 ',
            workCheckStatus: '部门经理审核中',
          },
          {
            workId: '3',
            userName: 'Petter',
            workTime: '2019-12-5',
            workContext: '组装屏幕',
            workCount: '135件 ',
            workCheckStatus: '部门经理审核中',
          },
          {
            workId: '4',
            userName: '李四',
            workTime: '2019-12-5',
            workContext: '组装屏幕',
            workCount: '102件 ',
            workCheckStatus: '部门经理审核中',
          },
          {
            workId: '5',
            userName: '王五',
            workTime: '2019-12-5',
            workContext: '组装屏幕',
            workCount: '126件 ',
            workCheckStatus: '部门经理审核中',
          },
        ],
        personName: '',
        crop: '',
        cropList: [],
        total: 50,
        params: {
          page: 1,
          size: 5
        },
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

<style>


</style>
